<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">

    <link rel="stylesheet" th:href="@{/lib/form-selects/form-selects.v4.css}"  media="all">
    <link rel="stylesheet" type="text/css" href="/lib/editormd/css/editormd.min.css">
</head>
<body>
    <div class="layui-form timo-compile">
    <div >
        <input type="hidden" name="id" th:if="${article}" th:value="${article?.id}">
        <div class="layui-form-item layui-col-sm8">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-block">
                <input class="layui-input" type="text" name="title" placeholder="请输入标题" th:value="${article?.title}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">自定义链接</label>
            <div class="layui-input-block">
                <input type="checkbox" lay-skin="switch"
                       th:checked="${article?.urlSequence ne null && !#strings.isEmpty(article?.urlSequence)}"
                       lay-filter="customUrl" lay-text="自定义|自动生成">
            </div>
        </div>
        <div class="layui-form-item layui-col-sm8"
             th:style="'display:' + @{(${article.urlSequence} ? 'none' : 'inline-block')} + ''"
             id="urlSequence">
            <label class="layui-form-label">文章短网址</label>
            <div class="layui-input-block">
                <input type="text" name="urlSequence" placeholder="输入文章短网址，示例：/article-example-url"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-col-sm8">
            <label class="layui-form-label">分类</label>
            <div class="layui-input-block">
                <select name="cate.id" lay-verify="required" lay-search>
                    <option value="">请选择</option>
                    <option th:each="cate,cateStat:${cateList}" th:value="${cate.id}"
                            th:text="${cate.cnName}"
                            th:selected="${cate.id==article.cate.id}"></option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">封面</label>
            <div class="layui-upload-drag" id="coverImg">
                <i th:if="${article.cover eq null || #strings.isEmpty(article.cover)}"
                   class="layui-icon"></i>
                <p th:if="${article.cover eq null || #strings.isEmpty(article.cover)}">
                    点击上传博文封面，或将封面拖拽到此处</p>
                <p th:if="${article.cover ne null && !#strings.isEmpty(article.cover)}"><img
                        th:src="${article.cover}"
                        style="width: 144px;height: 90px;"></p>
            </div>
        </div>
        <div class="layui-form-item layui-col-sm8">
            <label class="layui-form-label">封面地址</label>
            <div class="layui-input-block  ">
                <input type="text" name="cover" id="cover" th:value="${article.cover}"
                       autocomplete="off" class="layui-input" placeholder="手动输入封面地址">
            </div>
        </div>
<!--        <div class="layui-form-item">-->
<!--            <label class="layui-form-label">内容</label>-->
<!--            <div class="layui-input-inline">-->
<!--                <input class="layui-input" type="text" name="content" placeholder="请输入备注" th:value="${article?.content}">-->
<!--            </div>-->
<!--        </div>-->
        <div class="layui-form-item">
            <label class="layui-form-label">编辑器类型</label>
            <div class="layui-input-block">
                <input type="radio" name="editor" value="markdown" title="markdown编辑器"
                       th:checked="${!#strings.isEmpty(article.mdContent) && article.mdContent ne null }"
                       lay-filter="editor">
                <input type="radio" name="editor" value="html" title="富文本编辑器"
                       th:checked="${#strings.isEmpty(article.mdContent) ||  article.mdContent eq null}"
                       lay-filter="editor">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">内容</label>
            <div class="layui-input-block" id="content-editor"  style="max-width: 1366px;">
                <textarea id="content" name="content" th:text="${article?.content}" style="display: none;"></textarea>
            </div>
        </div>
        <textarea id="editormd-markdown-doc" name="editormd-markdown-doc"
                  style="display:none;"></textarea>
        <textarea id="editormd-html-code" name="editormd-html-code" style="display:none;"></textarea>
        <div class="layui-form-item">
            <label class="layui-form-label">开启摘要</label>
            <div class="layui-input-block">
                <input type="checkbox" name="autoSummary" lay-skin="switch"
                       lay-filter="summary" lay-text="手动撰写|自动生成">
            </div>
        </div>
        <div class="layui-form-item layui-form-text" id="article-summary" style="display: none;">
            <label class="layui-form-label">文章摘要</label>
            <div class="layui-input-block">
                            <textarea name="summary" placeholder="如果不填，则取文章内容的开头小部分（不包含图片以及文字格式）" class="layui-textarea"
                                      style="resize: none;"></textarea>
            </div>
        </div>
        <!--<div class="layui-form-item layui-col-sm8">-->
            <!--<label class="layui-form-label">标签</label>-->
            <!--<div class="layui-input-block">-->
                <!--<select name="tagNames"-->
                        <!--xm-select="tags"-->
                        <!--xm-select-max="4"-->
                        <!--xm-select-search=""-->
                        <!--xm-select-create=""-->
                        <!--xm-select-search-type="dl">-->
                <!--</select>-->
            <!--</div>-->
        <!--</div>-->
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">评论功能</label>
                <div class="layui-inline">
                    <input type="checkbox" name="commented" value="true" lay-skin="switch"
                           lay-text="开启|关闭" th:checked="${article.commented}"
                           title="评论">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">打赏功能</label>
                <div class="layui-inline">
                    <input type="checkbox" name="appreciable" value="true" lay-skin="switch"
                           th:checked="${article.appreciable}"
                           lay-text="开启|关闭" title="打赏">
                </div>
            </div>
        </div>
        <div class="layui-form-item timo-finally">
            <button class="layui-btn" lay-submit lay-filter="postSubmit"><i class="fa fa-check-circle"></i> 保存</button>
            <button class="layui-btn btn-secondary close-popup"><i class="fa fa-times-circle"></i> 关闭</button>
        </div>
    </div>
</div>
    <script th:inline="javascript">
        var isMd = [[${article.mdContent ne null && !#strings.isEmpty(article.mdContent)}]];
        var mdContents = isMd ? [[${article.mdContent}]] : '';
        var articleId = [[${article.id}]]
    </script>
<script th:replace="/common/template :: script"></script>
    <script type="text/javascript" th:src="@{/js/plugins/jquery-2.2.4.min.js}"></script>
    <script th:src="@{/js/system/article.js}" charset="utf-8"></script>
</body>
</html>